<template>
  <div>
    <div :loading="loading" class="app-container">
      <!--对象操作-->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Back" @click="handleBack"
            >返回</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            :disabled="isActiveButtonDisabled"
            type="success"
            plain
            icon="MagicStick"
            @click="handleActive"
            v-hasPermi="['pms:requirement:active']"
          >
            激活
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            :disabled="isBindingCaseButtonDisabled"
            type="success"
            plain
            icon="Connection"
            @click="handleAddCase"
            v-hasPermi="['pms:requirement:edit']"
          >
            添加用例
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            :disabled="isEditButtonDisabled"
            type="warning"
            plain
            icon="Edit"
            @click="handleEdit"
            v-hasPermi="['pms:requirement:edit']"
            >修改
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            :disabled="isChangeButtonDisabled"
            type="warning"
            plain
            icon="Switch"
            @click="handleChange"
            v-hasPermi="['pms:requirement:change']"
          >
            变更
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            :disabled="isCloseButtonDisabled"
            type="info"
            plain
            icon="SwitchButton"
            @click="handleClose"
            v-hasPermi="['pms:requirement:close']"
            >关闭
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            :disabled="isDeleteButtonDisabled"
            type="danger"
            plain
            icon="Delete"
            @click="handleDelete"
            v-hasPermi="['pms:requirement:delete']"
            >删除
          </el-button>
        </el-col>
        <y-history-toolbar
          :prefix="form.prefix"
          :historys="historys"
          :command="handleCommand"
        />
      </el-row>

      <!-- 信息展示 -->
      <el-row :gutter="10">
        <!-- 左侧详情展示 -->
        <el-col :lg="16" :xs="24">
          <el-card>
            <div class="card-header">
              <h4><strong>需求描述</strong></h4>
            </div>
            <div class="card-body">
              <div v-html="form.desc"></div>
            </div>
            <el-divider />
            <div class="card-header">
              <h4><strong>验收标准</strong></h4>
            </div>
            <div class="card-body">
              <div v-html="form.criteria"></div>
            </div>
          </el-card>
          <br />
          <el-card>
            <div class="card-header">
              <h4><strong>备注信息</strong></h4>
            </div>
            <div class="card-body">
              <div v-html="form.remark"></div>
            </div>
          </el-card>
          <br />
          <el-card v-if="form.review_remark">
            <div class="card-header">
              <h4><strong>评审说明</strong></h4>
            </div>
            <div class="card-body">
              <div v-html="form.review_remark"></div>
            </div>
          </el-card>
          <br />
          <el-card v-if="form.closed_type">
            <div class="card-header">
              <h4><strong>关闭说明</strong></h4>
            </div>
            <div class="card-body">
              <div v-html="form.closed_type"></div>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧属性展示 -->
        <el-col :lg="8" :xs="8">
          <el-card>
            <el-tabs v-model="activeName">
              <el-tab-pane label="基本信息" name="1">
                <el-descriptions direction="vertical" :column="1" border>
                  <el-descriptions-item label="需求名称">{{
                    form.name
                  }}</el-descriptions-item>
                  <el-descriptions-item label="需求编号">{{
                    form.id
                  }}</el-descriptions-item>
                  <el-descriptions-item label="所属产品">
                    <router-link
                      v-if="form.product"
                      :to="'/pms/product-info/index/' + form.product.value"
                      class="link-type"
                    >
                      <span>{{ form.product.label }}</span>
                    </router-link>
                  </el-descriptions-item>
                  <el-descriptions-item label="优先级">
                    <y-dict-tag
                      :options="sys_priority_level"
                      :value="form.priority"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="父需求">
                    <router-link
                      v-if="form.parent"
                      :to="'/pms/requirement-info/index/' + form.parent.value"
                      class="link-type"
                    >
                      <span>{{ form.parent.label }}</span>
                    </router-link>
                  </el-descriptions-item>
                  <el-descriptions-item label="需求来源">
                    <y-dict-tag
                      :options="pms_req_origin"
                      :value="form.origin"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="需求类别">
                    <y-dict-tag
                      :options="pms_req_classify"
                      :value="form.classify"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="评审结果">
                    <y-dict-tag
                      :options="pms_req_review"
                      :value="form.review_result"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="关闭类型">
                    <y-dict-tag
                      :options="pms_req_close"
                      :value="form.closed_type"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="负责人">{{
                    form.owner ? form.owner.label : ""
                  }}</el-descriptions-item>
                  <el-descriptions-item label="创建人">{{
                    form.creator_name
                  }}</el-descriptions-item>
                  <el-descriptions-item label="创建时间">{{
                    form.create_time
                  }}</el-descriptions-item>
                  <el-descriptions-item label="状态">
                    <y-dict-tag
                      :options="pms_req_status"
                      :value="form.status"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="标签">
                    <y-tag v-model="form.tags" :editable="false" />
                  </el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
              <el-tab-pane label="相关信息" name="2">
                <el-descriptions direction="vertical" :column="1" border>
                  <el-descriptions-item label="关联用例">
                    <router-link
                      v-for="(item, index) in form.testcase_set"
                      :to="'/tms/testcase-info/index/' + item.value"
                      class="link-type"
                    >
                      <span>{{ index + 1 }}.{{ item.label }}</span>
                      <br />
                    </router-link>
                  </el-descriptions-item>
                  <el-descriptions-item label="关联缺陷" :span="2">
                    <router-link
                      v-for="(item, index) in form.bugs"
                      :to="'/tms/bug-info/index/' + item.id"
                      class="link-type"
                    >
                      <span>{{ index + 1 }}.{{ item.number }}</span>
                      <br />
                    </router-link>
                  </el-descriptions-item>
                  <el-descriptions-item label="关联模块">
                    <router-link
                      v-if="form.module"
                      :to="'/pms/module-info/index/' + form.module.value"
                      class="link-type"
                    >
                      <span>{{ form.module.label }}</span>
                    </router-link>
                  </el-descriptions-item>
                  <el-descriptions-item label="关联版本">
                    <router-link
                      v-if="form.version"
                      :to="'/pms/version-info/index/' + form.version.value"
                      class="link-type"
                    >
                      <span>{{ form.version.label }}</span>
                    </router-link>
                  </el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
            </el-tabs>
          </el-card>
          <br />
          <el-card>
            <div class="card-header">
              <h4><strong>操作记录</strong></h4>
            </div>
            <div class="card-body">
              <el-collapse>
                <el-collapse-item
                  v-for="record in form.history"
                  :title="record.title"
                >
                  <li v-for="sub in record.content">
                    {{ sub }}
                  </li>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 添加或修改对话框 -->
    <au-req
      :id="id"
      v-model="openAuReq"
      :title="title"
      :operate="operate"
      :getMethod="getRequirement"
      :updateMethod="updateRequirement"
      @submited="getInfo"
      @close="openAuReq = false"
    >
    </au-req>

    <!-- 关闭需求对话框 -->
    <req-close
      :id="id"
      v-model="openClReq"
      :title="title"
      :getMethod="getRequirement"
      :updateMethod="updateRequirement"
      @submited="getInfo"
      @close="openClReq = false"
    >
    </req-close>

    <!-- 添加用例对话框 -->
    <ad-cases
      :id="id"
      v-model="openAdCase"
      :title="title"
      :getMethod="getRequirement"
      :updateMethod="updateRequirement"
      @submited="getInfo"
      @close="openAdCase = false"
    >
    </ad-cases>
  </div>
</template>
<script setup name="ReqInfo">
import {
  getRequirement,
  getHistory,
  updateRequirement,
  delRequirement,
} from "@/api/pms/requirement";
import AuReq from "./components/AuReq";
import AdCases from "./components/AdCases";
import ReqClose from "./components/ReqClose";
import useUserStore from "@/store/modules/user";

const { proxy } = getCurrentInstance();
const {
  pms_req_status,
  sys_priority_level,
  pms_req_origin,
  pms_req_classify,
  pms_req_review,
  pms_req_close,
} = proxy.useDict(
  "pms_req_status",
  "sys_priority_level",
  "pms_req_origin",
  "pms_req_classify",
  "pms_req_review",
  "pms_req_close"
);

const data = reactive({
  form: {},
});

const { form } = toRefs(data);

const id = proxy.$route.params.id;
const title = ref("");
const operate = ref("update");
const loading = ref(false);
const activeName = ref("1");
const openAuReq = ref(false);
const openAdCase = ref(false);
const openClReq = ref(false);
const historys = ref([]);

const user = ref(null);

const isActiveButtonDisabled = computed(() => {
  // 检查当前用户是否为需求的负责人
  // if (user.value) {
  //   if (form.value.owner !== user.value) {
  //     return true;
  //   }
  // }
  // 如果没有触发以上任何条件，说明可以进行评审
  return false;
});

const isBindingCaseButtonDisabled = computed(() => {
  // 检查当前用户是否为需求的负责人
  // if (user.value) {
  //   if (form.value.owner !== user.value) {
  //     return true;
  //   }
  // }
  // 如果没有触发以上任何条件，说明可以进行评审
  return false;
});

const isEditButtonDisabled = computed(() => {
  // 检查需求是否已关闭
  if (form.value.status === "closed") {
    return true;
  }

  // 检查当前用户是否为需求的负责人
  // if (user.value) {
  //   if (form.value.owner !== user.value) {
  //     return true;
  //   }
  // }

  // 如果以上条件均不满足，则允许编辑
  return false;
});

const isChangeButtonDisabled = computed(() => {
  // 检查需求状态是否为已激活
  if (form.value.status !== "activated") {
    return true;
  }
  // if (user.value) {
  //   // 检查当前用户是否为需求的负责人
  //   if (form.value.owner !== user.value) {
  //     return true;
  //   }
  // }
  // 如果没有触发以上任何条件，说明可以进行评审
  return false;
});

const isCloseButtonDisabled = computed(() => {
  // 检查需求状态是否为已关闭
  if (form.value.status === "closed") {
    return true;
  }
  // 检查当前用户是否为需求的负责人
  // if (user.value) {
  //   if (form.value.owner !== user.value) {
  //     return true;
  //   }
  // }

  // 如果没有触发以上任何条件，说明可以进行评审
  return false;
});

const isDeleteButtonDisabled = computed(() => {
  // 检查当前用户是否为需求的负责人
  // if (user.value) {
  //   if (form.value.owner !== user.value) {
  //     return true;
  //   }
  // }
  // 如果没有触发以上任何条件，说明可以进行评审
  return false;
});

/** 获取版本详情 */
async function getInfo() {
  try {
    loading.value = true;
    const requirementResponse = await getRequirement(id);
    form.value = requirementResponse.data;

    const historyResponse = await getHistory(id);
    historys.value = historyResponse.data;

    const userInfo = await useUserStore().getInfo();
    user.value = userInfo.data.user.id;
  } catch (error) {
    console.error("Failed to fetch data:", error);
  } finally {
    loading.value = false;
  }
}

/** 查询某条历史记录 */
function handleCommand(command) {
  form.value = command;
}

/** 返回按钮操作 */
function handleBack() {
  proxy.$router.back();
}

function handleActive() {
  const oldStatus = form.value.status;
  // 激活需求后，将需求状态重置为 “草稿”，并清空已评审信息
  form.value.status = "draft";
  form.value.review_result = "";
  form.value.closed_type = "";
  updateRequirement(form.value)
    .then((res) => {
      getInfo();
      proxy.$modal.msgSuccess("激活成功");
    })
    .catch((error) => {
      form.value.status = oldStatus;
    });
}

/** 关联用例操作 */
function handleAddCase() {
  openAdCase.value = true;
  title.value = "关联用例";
}

/** 修改操作 */
function handleEdit() {
  openAuReq.value = true;
  title.value = "修改需求";
}

/** 变更操作 */
function handleChange() {
  openAuReq.value = true;
  title.value = "变更需求";
  operate.value = "change";
}

/** 关闭操作 */
function handleClose() {
  openClReq.value = true;
  title.value = "关闭需求";
}

/** 删除按钮操作 */
function handleDelete() {
  proxy.$modal
    .confirm(
      '是否确认删除需求"' +
        form.value.name +
        '"的数据项？若确认删除，该需求关联信息也将被删除！'
    )
    .then(() => {
      return delRequirement(id);
    })
    .then(() => {
      proxy.$modal.msgSuccess("删除成功");
      handleBack();
    })
    .catch(() => {});
}

/** 组件挂载完成事件 */
onMounted(() => {
  getInfo();
}),
  /** 添加/修改对象后触发事件 */
  function submited() {
    getInfo();
  };
</script>
